<template>
  <div class="app-container">

	<!-- 列表 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      style="width: 100%;margin-top: 10px;">

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="id" label="ID" width="180"/>
      <el-table-column prop="instanceName" label="流程称" />
      <el-table-column prop="name" label="任务节点名称" />
      <el-table-column prop="status" label="任务状态" />
      <el-table-column prop="assignee" label="办理人" />
      <el-table-column prop="createdDate" label="创建时间" />

      <el-table-column label="操作"  align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text"  @click="handle(scope.row)">办理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      background
      :current-page="pageNum"
      :total="total"
      :page-size="pageSize"
      style="padding: 30px 0; text-align: right;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

    <!-- 审批对话框 -->
    <el-dialog :title="title" :visible.sync="open" v-if="open" width="500px" append-to-body>
      <el-form :model="formData" ref="form" label-width="100px" class="demo-dynamic">
        <el-form-item
          v-for="(domain, index) in formData"
          :label="domain.controlName + ':'"
          :key="index">

          <el-radio-group v-model="domain.controlValue" v-if="'radio'==domain.controlType">
            <el-radio
              v-model="domain.controlValue"
              v-for="(en, index2) in domain.controlDefault.split('-_-')"
              :label = index2
              :key = "index2">
              {{en}}
            </el-radio>
          </el-radio-group>
          <el-input type="textarea" v-model="domain.controlValue" v-if="'textarea'==domain.controlType"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import api from '@/api/act/mytask'

export default {
  data() {
    return {
      listLoading: false, // 数据是否正在加载
      list: null, // 列表
      total: 0, // 数据库中的总记录数
      pageNum: 1,
      pageSize: 10,
      searchObj: {}, // 查询表单对象

      id: '',
      open: false,
      title: '',
      formData: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData(pageNum = 1) {
      this.pageNum = pageNum
      api.getPageList(this.pageNum, this.pageSize).then(response => {
        this.list = response.data.listMap
        this.total = response.data.total
      })
    },

    handle(row) {
      const par = { taskID: row.id }
      this.id = row.id
      api.formDataShow(par).then(res => {
        if (res.code === 200) {
          const dataList = res.data
          const formData = []
          for (let i = 0; i < dataList.length; i++) {
            let controlValue = null
            let controlDefault = null
            switch (dataList[i].controlType) {
              case 'radio':
                controlValue = 0
                controlDefault = dataList[i].controlValue
                break
            }
            formData.push({
              controlId: dataList[i].controlId,
              controlName: dataList[i].controlName,
              controlValue: controlValue,
              controlType: dataList[i].controlType,
              controlIsParam: dataList[i].controlIsParam,
              controlDefault: controlDefault
            })
          }
          this.formData = formData
          this.title = '审批'
          this.open = true
        }
      })
    },

    submitForm() {
      const id = this.id
      const par = { taskID: id, formData: this.formData }
      this.$confirm('确认审批办理?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return api.handle(par)
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success('办理成功')
          this.open = false
          this.fetchData()
        }
      })
    },

    cancel() {
      this.open = false
      this.fetchData()
    }

  }
}
</script>
